<template>
    <div>
        <div class="header" style="background-color: white">
            <el-page-header @back="goBack" content="律所收支录入">
            </el-page-header>
        </div>
        <el-divider></el-divider>
        <el-row>
            <el-col :span="12"><h1>律所收支</h1></el-col>
            <el-col :span="12"></el-col>
        </el-row>
        <el-form style="margin-left: 60px;margin-top: 20px">
            <el-container>
                <el-form-item label="收支日期：">
                    <el-date-picker
                            style="width: 500px;"
                            v-model="lsIncome.collectionDate"
                            type="date"
                            placeholder="选择日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="收支金额：" style="margin-left: 20px">
                    <el-input style="width: 500px;" type="number" v-model="lsIncome.collectionMoney"></el-input>
                </el-form-item>
            </el-container>

            <el-container>
                <el-form-item label="收支人：">
                    <el-input v-model="lsIncome.cwInoutPerson" style="width: 500px;"></el-input>
                </el-form-item>
                <el-form-item label="收支类别：" style="margin-left: 20px">
                    <el-cascader placeholder="请选择收入类型" clearable
                                 style="width: 500px;"
                                 v-model="lsIncome.id"
                                 :options="options"
                                 :props="{ expandTrigger: 'hover' ,checkStrictly:true,emitPath:true }"
                                 @change="handleChange">
                    </el-cascader>
                </el-form-item>
            </el-container>

            <el-container>
                <el-form-item label="付款人：">
                    <el-input style="width: 500px;" v-model="lsIncome.cwPayer"></el-input>
                </el-form-item>
                <el-form-item label="支付方式：" style="margin-left: 20px">
                    <el-select style="width: 500px;" v-model="lsIncome.cWPayType" clearable placeholder="请选择支付方式">
                        <el-option
                                v-for="item in payOption"
                                :key="item.cWPayType"
                                :label="item.payType"
                                :value="item.cWPayType">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-container>

            <el-container>
                <el-form-item label="备注：">
                    <el-input type="textarea" style="width: 1000px;" v-model="lsIncome.cwRemark"></el-input>
                </el-form-item>
            </el-container>

            <el-container>
                <el-form-item>
                    <el-button type="primary" @click="checkCommit">确认提交</el-button>
                </el-form-item>
            </el-container>
        </el-form>
    </div>
</template>

<script>

    import CwInoutService from '../../../model/ww/cw_inout/CwInoutService'
    import CwInoutTypeService from '../../../model/ww/cw_inout_type/CwInoutTypeService'


    const cwInoutService = CwInoutService.getInstance();
    const cwInoutTypeService = CwInoutTypeService.getInstance();
    export default {
        name: "LsFinanace",
        data() {
            return {
                lsIncome: {
                    caseLawId:null,//案件ID
                    cwEnteringDate: '' //录入日期
                } ,//收支对象
                payOption:[
                    {
                        cWPayType:'1',
                        payType:'网银'
                    },
                    {
                        cWPayType:'2',
                        payType:'银行卡'
                    },
                    {
                        cWPayType:'3',
                        payType:'支付宝'
                    },
                    {
                        cWPayType:'4',
                        payType:'微信'
                    },
                    {
                        cWPayType:'5',
                        payType:'其他'
                    }
                ],  //支付方式
                options:[]  //收入类类型
            }
        },
        methods: {
            checkCommit() {
                if(this.lsIncome.collectionDate=='' || this.lsIncome.collectionDate==null){
                    this.$message('请选择日期');
                    return
                }
                if(this.lsIncome.collectionMoney=='' || this.lsIncome.collectionMoney==null){
                    this.$message('请填写收支金额');
                    return
                }
                if(this.lsIncome.cwInoutPerson=='' || this.lsIncome.cwInoutPerson==null){
                    this.$message('请填写收支人');
                    return
                }
                if(this.lsIncome.id=='' || this.lsIncome.id==null){
                    this.$message('请选择收支类别' );
                    return
                }
                if(this.lsIncome.cWPayType=='' || this.lsIncome.cWPayType==null){
                    this.$message('请选择支付方式');
                    return
                }
                if(this.lsIncome.cwPayer=='' || this.lsIncome.cwPayer==null){
                    this.$message('请填写付款人');
                    return
                }
                var date = new Date();
                var time = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDay()
                this.lsIncome.cwEnteringDate = time

                cwInoutService.checkCommit(this.lsIncome).then(() => {
                    //初始化
                    this.lsIncome.collectionDate=''
                    this.lsIncome.collectionMoney = ''
                    this.lsIncome.cwInoutPerson = ''
                    this.lsIncome.cwPayer = ''
                    this.lsIncome.cwRemark = ''
                })
            },
            selects() { //查询收入类型
                cwInoutTypeService.list().then((response) => {
                    this.options = response.data.data

                })
            },
            handleChange(ids){//收入类型下拉框改变事件
                if(ids.length==3){
                    this.lsIncome.id=ids[ids.length-1]
                }
                if(ids.length==2){
                    this.lsIncome.id=ids[ids.length-1]
                }
                if(ids.length==1){
                    this.lsIncome.id=ids[ids.length-1]
                }
            },
            goBack(){
                history.back()
            }
        },
        created(){
            this.selects()
        }
    }
</script>

<style scoped>
    .el-row {
        margin-top: 40px;
        margin-left: 30px;
    }

    .el-col {
        width: 700px;
        margin-left: 30px;
    }

    span > .red {
        color: red;
        font-size: 20px;
    }

    span {
        font-size: 15px;
        font-weight: 600;
    }
</style>
